<template>
    <div id="CascaderItem">
        <div class="cascader-wrap">
            <div class="item-checkbox">
                <input class="item-checkbox-input" type="checkbox" v-model="isAll" @change="checkAllHandle" :disabled="disabled" />
                <span class="item-checkbox-inner"></span>
                <span class="item-checkbox-txt">全选</span>
            </div>
            <div
                v-for="(item, index) in dataList"
                :key="$util.keys(index)"
                :class="['cascader-wrap-item', { cur: curIndex === index }]"
                @click.self="selectOne(index)">
                <div class="item-checkbox" @click.self="selectOne(index)">
                    <input class="item-checkbox-input" type="checkbox" v-model="item[props.checked]" @change="checkOneHandle(index)" :disabled="disabled" />
                    <span class="item-checkbox-inner"></span>
                    <span class="item-checkbox-txt" @click="selectOne(index)">{{item[props.label]}}</span>
                </div>
            </div>
        </div>
        <CascaderItem
            v-if="dataList[curIndex] && dataList[curIndex][props.children]"
            :data="dataList[curIndex]"
            :props="props"
            :disabled="disabled"
        />
    </div>
</template>

<script lang="ts">
import { Component, Vue, Watch, Prop } from 'vue-property-decorator'

@Component({name: 'CascaderItem'})
export default class CascaderItem extends Vue {
    @Prop({ type: [Object, Array], default: () => [] }) data!: any
    @Prop({ type: Object, default: () => ({}) }) props!: any
    @Prop({ type: Boolean, default: false }) disabled!: boolean

    isAll: boolean = false
    curIndex: number = 0
    dataList: any = []

    checkAllHandle (e: any) {
        const checked = e.target.checked
        this.dataList.forEach((item: any) => {
            item[this.props.checked] = checked
        })
        this.checkChildrenHandle(this.dataList, checked)
    }
    selectOne (index: number) {
        this.curIndex = index
    }
    checkOneHandle (index: number) {
        this.curIndex = index
        this.isAll = this.dataList.every((item: any) => item[this.props.checked])
        this.checkChildrenHandle(this.dataList[index][this.props.children], this.dataList[index][this.props.checked])
    }
    checkChildrenHandle (dataList: any[], checked: boolean) {
        dataList && dataList.forEach(item => {
            item[this.props.checked] = checked
            item[this.props.children] && this.checkChildrenHandle(item[this.props.children], checked)
        })
    }

    @Watch('data', { immediate: true, deep: true })
    watchData () {
        const isArray = Array.isArray(this.data)
        this.dataList = isArray ? this.data : this.data[this.props.children]
        this.isAll = this.dataList.every((item: any) => item[this.props.checked])
        if (!isArray) {
            this.data[this.props.checked] = this.dataList && this.dataList.some((item: any) => item[this.props.checked])
        }
    }
}
</script>

<style lang="scss">
#CascaderItem {
    display: flex;
    .cascader-wrap {
        width: 250px;
        height: 400px;
        border-radius: 8px;
        padding: 15px 20px;
        border: 1px solid #e1e1e1;
        margin-right: 20px;
        overflow: auto;
        box-shadow: 2px 2px 10px #e1e1e1;
        flex-shrink: 0;
        .cascader-wrap-item {
            width: 100%;
            border-radius: 4px;
            padding: 8px 10px;
            user-select: none;
            cursor: pointer;
            &.cur {
                background-color: #efefef;
            }
        }
        .item-checkbox {
            position: relative;
            display: flex;
            align-items: flex-end;
            line-height: 1;
            .item-checkbox-input {
                width: 16px;
                height: 16px;
                opacity: 0;
                position: absolute;
                z-index: 1;
                cursor: pointer;
                &:checked + .item-checkbox-inner {
                    background-color: #1890ff;
                    border: none;
                }
                &:disabled + .item-checkbox-inner {
                    background-color: #d1d1d1;
                    border: none;
                }
                &:checked + .item-checkbox-inner::after {
                    content: '';
                    width: 5.7px;
                    height: 9.1px;
                    position: absolute;
                    display: table;
                    border: 2px solid #fff;
                    border-top: 0;
                    border-left: 0;
                    top: 50%;
                    left: 4px;
                    transform: rotate(45deg) scale(1) translate(-50%, -50%);
                    opacity: 1;
                    transition: all 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s;
                }
            }
            .item-checkbox-inner {
                width: 16px;
                height: 16px;
                background-color: #fff;
                border: 1px solid #d9d9d9;
                border-radius: 3px;
                display: inline-block;
                position: relative;
            }
            .item-checkbox-txt {
                margin-left: 10px;
            }
        }
        >.item-checkbox {
            width: 100%;
            padding: 5px 10px;
            margin-bottom: 5px !important;
            border-bottom: 1px solid #f1f1f1;
            user-select: none;
        }
    }
}
</style>
